<template>
    <div class="app-container">
        <el-transfer v-loading="studentLoading" v-model="value" :data="dataList" filterable :filter-method="filterMethod" :titles="['未选择', '已选择']" filter-placeholder="请输入学员姓名">
            <span slot-scope="{ option }" v-html="option.label"></span>
        </el-transfer>
    </div>
</template>

<script>

import {isEmptyArr,copyArr,isNotEmptyArr} from "@/utils/zzDouUtils/arrayUtil";

export default {
    name: "Go_score_exam_student",
    props:{
        studentIdList:{
            type: Array,
            default: ()=>[],
        },
        studentList:{
            type: Array,
            default: ()=>[],
        },
        studentLoading:{
            type: Boolean,
            default: false,
        },
    },
    watch:{
        value:{
            handler(newVal, oldVal) {
                this.$emit('setStudentIdList',newVal);
            },
            // 开启深度监听
            deep: true
        },
        'studentList': {
            handler(newVal, oldVal) {
                if (isEmptyArr(newVal)){
                    this.$emit('setStudentList',[]);
                    this.$set(this,'dataList', []);
                }else {
                    this.$set(this,'dataList', copyArr(newVal));
                }
            },
            // 开启深度监听
            deep: true
        },
    },
    data() {
        return {
            dataList: [],
            value: [],
        };
    },
    created() {
        if (isEmptyArr(this.studentList)){
            if (isNotEmptyArr(this.studentIdList)){
                this.value = copyArr(this.studentIdList)
            }else {
                this.$set(this,'value', []);
            }
            this.$set(this,'dataList', []);
        }else {
            this.$set(this,'dataList',copyArr(this.studentList));
        }

    },
    methods: {
        filterMethod(query, item) {
            return item.label.indexOf(query) > -1;
        }
    }
};
</script>
<style scoped>
/deep/.el-transfer-panel {
    height: 450px;
}

/deep/.el-transfer-panel__list {
    height: 440px;
}
</style>
